<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>10_系统滚动条控制</title>

        <style>
            * {
                margin: 0;
                padding: 0;
            }
            /* (1)单独的给body或者html 设置overflow:scroll  滚动条打开的全部都是document的 */
            /* html {
                width: 500px;
                height: 500px;
                border: 10px solid red;
                overflow: scroll;
            }

            body {
                width: 300px;
                height: 300px;
                border: 10px solid green;
                overflow: scroll;
            } */


            /* （2）如果两个元素同时设置overflow属性，
            body设置的是scroll,html设置是hidden,那么document的滚动条被关闭，body身上的滚动条会打开，
            相反，body身上被关闭，document身上的被打开 */
            /* html {
                width: 500px;
                height: 500px;
                border: 10px solid red;
                overflow: scroll;
            }

            body {
                width: 300px;
                height: 300px;
                border: 10px solid green;
                overflow: hidden;
            } */


            /* (3)如果两个元素同时设置overflow:hidden；那么系统的两个滚动条全部被关闭 */
            /* html {
                width: 500px;
                height: 5000px;
                border: 10px solid red;
                overflow: hidden;
            }

            body {
                width: 300px;
                height: 3000px;
                border: 10px solid green;
                overflow: hidden;
            } */

            /* (4) 如果两个都设置overflow:scroll,那么html会打开document身上的，而body会打开自己身上的滚动条*/
            /* html {
                width: 500px;
                height: 5000px;
                border: 10px solid red;
                overflow: scroll;
            }

            body {
                width: 300px;
                height: 3000px;
                border: 10px solid green;
                overflow: scroll;
            } */

            /* （5）企业级开发应用这种方式
                因为不同的浏览器的滚动效果是不一样的 所以我们为了让用户体验更好 就会将系统
                滚动条取消  然后自己书写滚动条
            */
            html,body{
			 		height:100%;    
					overflow:hidden; 			
			 }
        </style>
    </head>
    <body>
        
    </body>
</html>